<h1>第1种页面展示方式：传统【开始】</h1>
<div id="app">
    <h2>X are in stock.</h2>
</div>

<script>
    var product = 'Boots'
</script>
<h1>第1种页面展示方式：传统【结束】</h1>

<hr />


<h1>第2种页面展示方式：VUE【开始】</h1>
<div id="app2">
    <h2>{{product2}} are in stock.</h2>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    const app2 = new Vue({
        el: '#app2',
        data: {
            product2: 'Boots2'
        }
    })
</script>

<h1>第2种页面展示方式：VUE【结束】</h1>

<hr />

<h1>第3种页面展示方式：VUE列表【开始】</h1>
<div id="app3">
    <ul>
        <li v-for="product3 in products3">
            {{ product3 }}
        </li>
    </ul>
</div>

<script>
    const app3 = new Vue({
        el: '#app3',
        data: {
            products3: [
                'Boots',
                'Jacket',
                'Hiking Socks'
            ]
        }
    })
</script>

<h1>第3种页面展示方式：VUE列表【结束】</h1>

<hr />

<h1>第4种页面展示方式：VUE调用接口赋值列表【开始】</h1>
<div id="app4">
    <ul>
        <li v-for="product4 in products4">
            <input type="number" v-model.number="product4.quantity">
            {{product4.name}}
            <span v-if="product4.quantity === 0">
                - OUT OF STOCK
            </span>
            <button @click="product4.quantity +=1">
                Add
            </button>
        </li>
    </ul>
    <h2>Total Inventory: {{ totalProducts }} </h2>
</div>

<script>
    const app4 = new Vue({
        el: '#app4',
        data: {
            products4: []
        },
        computed: {
            totalProducts() {
                return this.products4.reduce((sum, product4) => {
                    return sum + product4.quantity
                }, 0)
            }
        },
        created() {
            fetch('http://127.0.0.1:5500/resource.html')
                .then(response => response.json())
                .then(json => {
                    this.products4 = json.products4
                })
        }
    })
</script>

<h1>第4种页面展示方式：VUE调用接口赋值列表列表【结束】</h1>